<script setup>
import { useQuasar } from '@teld/q-components';
import { onBeforeMount, reactive } from 'vue';
import RepeatDemo from './RepeatDemo.vue';
import RepeatLoading from './RepeatLoading.vue';
import RepeatNoData from './RepeatNoData.vue';
import RepeatPagination from './RepeatPagination.vue';
import RepeatScroll from './RepeatScroll.vue';
import { makeMockData } from './utils.js';

defineOptions({
  name: 'RepeatDemoIndex',
});

const {platform} = useQuasar();
const state = reactive({
  currentTab: 'demo', // 综合示例
  dataList: [],
  isLoading: false,
  hasLoadedAll: false,
  //
  pageSize: 10,
  pageIndex: 0,
  //
});

const fetchPageData = () => {
  if (state.hasLoadedAll || state.isLoading) return;

  state.pageIndex += 1;
  const { List, Total } = makeMockData(state.pageIndex, state.pageSize);
  console.log('fetchPageData', List, Total);
  state.dataList = state.dataList.concat(List || []);
  state.hasLoadedAll = state.dataList.length >= Total;
};

const onScrollLoad = (index, size, done) => {
  setTimeout(() => {
    fetchPageData();
    done(true);
  }, 1000);
}

onBeforeMount(() => {
  // console.log(platform, import.meta.glob('src/views/*/index.(vue|jsx|js)'))
});
</script>

<template>
  <div class="repeat-usage q-pa-md full-width full-height" style="overflow:hidden;">
    <q-tabs v-model="state.currentTab" :align="`left`">
      <q-tab name="basic" icon="home" label="Basic" />
      <q-tab name="loading" icon="directions_run" label="Loading" />
      <q-tab name="scroll" icon="run_circle" label="Scroll" />
      <q-tab name="paging" icon="mail" label="分页表格" />
      <q-tab name="empty" icon="view_in_ar" label="NoData" />
      <q-tab name="demo" icon="verified" label="综合示例" />
    </q-tabs>

    <t-separator></t-separator>

    <q-tab-panels v-model="state.currentTab" class="full-width full-height">
      <q-tab-panel name="basic">
        <h6>使用默认插槽进行内容填充</h6>
        <t-repeat-x
          :list="state.dataList"
          style="height: 400px;"
          @scroll-load="onScrollLoad"
        >
          <!-- <template #default>
            <t-item v-for="row in state.dataList" :key="row.id" clickable v-ripple>
              <t-item-section>
                <t-item-label>{{ row.description }}</t-item-label>
              </t-item-section>
            </t-item>
          </template> -->
        </t-repeat-x>
      </q-tab-panel>

      <!-- 加载中效果 -->
      <q-tab-panel name="loading">
        <RepeatLoading></RepeatLoading>
      </q-tab-panel>

      <!-- 无数据 -->
      <q-tab-panel name="empty">
        <RepeatNoData></RepeatNoData>
      </q-tab-panel>

      <q-tab-panel name="scroll">
        <RepeatScroll></RepeatScroll>
      </q-tab-panel>

      <q-tab-panel name="paging">
        <RepeatPagination></RepeatPagination>
      </q-tab-panel>

      <q-tab-panel name="demo">
        <RepeatDemo></RepeatDemo>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>
